<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Personal Page - Bootstrap Theme</title>

	<!-- CSS includes -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet"> 
	<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<h2>William Johnson</h2>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#home" class="smooth-scroll">HOME</a></li>
				<li><a href="#about" class="smooth-scroll">ABOUT ME</a></li>
				<li><a href="#skills" class="smooth-scroll">SKILLS</a></li>
				<li><a href="#vision" class="smooth-scroll">VISION</a></li>
				<li><a href="#blog" class="smooth-scroll">BLOG</a></li>
				<li><a href="#gallery" class="smooth-scroll">GALLERY</a></li>
				<li><a href="#contact" class="smooth-scroll">CONTACT</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<div class="container-top">
	<div class="container">
		<div class="page-header" id="home">
        </div>
		<div class="row">
			<div class="col-md-6" style="background-color: #1E1F23; opacity: 0.8; padding: 20px;">
				<h1>HELLO</h1>
				<h1>I AM WILLIAM JOHNSON</h1>
				<h1>WELCOME TO MY</h1>
				<h1>PERSONAL PAGE!</h1>
			</div>
		</div>
	</div>
</div>

<div class="container-about">
	<div class="container">
		<div class="page-header" id="about">
        </div>
		<div class="row">
			<div class="col-md-3">
				<img src="images/image2.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">FROM THE BLOG</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
			<div class="col-md-6">
				<img src="images/image1.jpg" class="img-responsive" style="margin-bottom: 15px;" />
			</div>
			<div class="col-md-3">
				<img src="images/image3.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">MUSIC IN MY LIFE</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
		</div>
		<div class="row" style="padding-top: 30px;">
			<div class="col-md-3">
				<img src="images/image4.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">FROM THE BLOG</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
			<div class="col-md-3">
				<img src="images/image7.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">TRAVEL</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
			<div class="col-md-3">
				<img src="images/image5.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">MY WORK</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
			<div class="col-md-3">
				<img src="images/image6.jpg" class="img-responsive" />
				<h4 style="color: #fff; background-color: #1E1F23; padding: 5px;">LIFE STYLE</h4>
				<br />
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
			</div>
		</div>
	</div>
</div>

<div class="container-skills">
	<div class="container">
		<div class="page-header" id="skills">
			<h1 style="padding-top: 20px;">My Skills</h1>
        </div>
		<div class="row">
			<div class="col-md-6">
				<h3>What is Lorem Ipsum?</h3>
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<br />
				<h3>Where does it come from?</h3>
				<p class="text-justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
				<br />
				<p><i class="fa fa-camera" aria-hidden="true"></i>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<p><i class="fa fa-paint-brush" aria-hidden="true"></i>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<p><i class="fa fa-print" aria-hidden="true"></i>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<p><i class="fa fa-cogs" aria-hidden="true"></i>&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<br />
				<button type="button" class="btn btn-default">MORE</button>
			</div>
			<div class="col-md-6">
			</div>
		</div>
	</div>
</div>

<div class="container-vision">
	<div class="container">
		<div class="page-header" id="vision">
			<h1 style="padding-top: 20px;">My Vision</h1>
        </div>
		<div class="row">
			<div class="col-md-4">
				<h3>What is Lorem Ipsum?</h3>
				<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			</div>
			<div class="col-md-4">
				<h3>Where does it come from?</h3>
				<p class="text-justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</p>
			</div>
			<div class="col-md-4">
				<h3>Why do we use it?</h3>
				<p class="text-justify">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.</p>
			</div>
		</div>
	</div>
</div>

<div class="container-blog">
	<div class="container">
		<div class="page-header" id="blog">
			<h1 style="padding-top: 20px;">Blog</h1>
		</div>
		<div class="row">
			<div class="col-md-4">
				<h2>Categories</h2>
				<br />
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;What is Lorem Ipsum?</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;Where does it come from?</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;Where can I get some?</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;Why do we use it?</p>
				<br />
				<h2>Archives</h2>
				<br />
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;December 2016</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;January 2017</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;Fevruary 2017</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;March 2017</p>
				<p><i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp; &nbsp;April 2017</p>
			</div>
			<div class="col-md-8">
				<div>
					<div class="row">
						<div class="col-xs-12">
							<h3>Marketing Article</h3>
							<p class="text-justify">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
			Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
			dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
			Aliquam in felis sit amet augue.
							</p>
							<button class="btn btn-default" type="button" style="background-color: #4B4B4B; color: #fff; margin-bottom: 15px; ">MORE</button>
							<div class="text-center">
								<a href="#"><span class="glyphicon glyphicon-plus"></span>&nbsp;Full Story</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-comment"></span>&nbsp;12 Comments</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-share"></span>&nbsp;11 Shares</a>
							</div>
						</div>
					</div>
					<hr />
					<div class="row">
						<div class="col-xs-12">
							<h3>Sales Article</h3>
							<p class="text-justify">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
			Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
			dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
			Aliquam in felis sit amet augue.
							</p>
							<button class="btn btn-default" type="button" style="background-color: #4B4B4B; color: #fff; margin-bottom: 15px;">MORE</button>
							<div class="text-center">
								<a href="#"><span class="glyphicon glyphicon-plus"></span>&nbsp;Full Story</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-comment"></span>&nbsp;2 Comments</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-share"></span>&nbsp;211 Shares</a>
							</div>
						</div>
					</div>
					<hr />
					<div class="row">
						<div class="col-xs-12">
							<h3>Finance Article</h3>
							<p class="text-justify">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
			Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
			dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
			Aliquam in felis sit amet augue.
							</p>
							<button class="btn btn-default" type="button" style="background-color: #4B4B4B; color: #fff; margin-bottom: 15px;">MORE</button>
							<div class="text-center">
								<a href="#"><span class="glyphicon glyphicon-plus"></span>&nbsp;Full Story</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-comment"></span>&nbsp;7 Comments</a>&nbsp; &nbsp; &nbsp;
								<a href="#"><span class="glyphicon glyphicon-share"></span>&nbsp;67 Shares</a>
							</div>
						</div>
					</div>
					<hr />
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-gallery">
    <div class="container">
        <div class="page-header" id="gallery">
            <h1 style="padding-top: 20px;">Gallery</h1>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="list-unstyled text-center">
                    <li class="filter btn btn-default" data-filter="all">ALL</li>
                    <li class="filter btn btn-default" data-filter=".graphic">GRAPHICS</li>
                    <li class="filter btn btn-default" data-filter=".print">PRINT</li>
                    <li class="filter btn btn-default" data-filter=".webdesign">WEB DESIGN</li>
                </ul>
            </div>
            <div class="mix graphic col-md-4">
                <a href="images/gallery/gallery1.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery1.jpg" />
                </a>
            </div>
            <div class="mix print col-md-4">
                <a href="images/gallery/gallery2.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery2.jpg" />
                </a>
            </div>
            <div class="mix webdesign col-md-4">
                <a href="images/gallery/gallery3.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery3.jpg" />
                </a>
            </div>
            <div class="mix webdesign col-md-4">
                <a href="images/gallery/gallery4.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery4.jpg" />
                </a>
            </div>
            <div class="mix print col-md-4">
                <a href="images/gallery/gallery5.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery5.jpg" />
                </a>
            </div>
            <div class="mix graphic col-md-4">
                <a href="images/gallery/gallery6.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery6.jpg" />
                </a>
            </div>
            <div class="mix webdesign col-md-4">
                <a href="images/gallery/gallery7.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery7.jpg" />
                </a>
            </div>
            <div class="mix webdesign col-md-4">
                <a href="images/gallery/gallery8.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery8.jpg" />
                </a>
            </div>
            <div class="mix graphic col-md-4">
                <a href="images/gallery/gallery9.jpg" class="img-wrapper">
                    <img class="img-responsive" src="images/gallery/gallery9.jpg" />
                </a>
            </div>
        </div>
    </div>
    <div class="clearfix hidden-xs" style="width:100%; height:50px;"></div>
</div>

<div class="container-contact">
    <div class="container">
		<div class="page-header" id="contact">
            <h1 style="padding-top: 20px;">Contact</h1>
        </div>
        <div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-map-marker fa-4x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>54, North Road, PA 45086, USA</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-mobile fa-4x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>+1 888 455 6677</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-envelope-o fa-3x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>mail@example.com</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label for="form-name">Name</label>
                        <input type="email" class="form-control" id="form-name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="form-email">Email Address</label>
                        <input type="email" class="form-control" id="form-email" placeholder="Email Address">
                    </div>
                    <div class="form-group">
                        <label for="form-subject">Subject</label>
                        <input type="text" class="form-control" id="form-subject" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <label for="form-message">Message</label>
                        <textarea class="form-control" id="form-message" placeholder="Message"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default">Send Message</button>
                    <br /><br />
                </form>
            </div>
        </div>
    </div>
    <div class="clearfix hidden-xs" style="width:100%; height:30px;"></div>
</div>

<div class="clearfix">
	<div id="googlemap"></div>
</div> 

<footer id="subfooter" class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p style="font-size:18px;"><span class="fa fa-envelope-o text-color:#fff"></span> NEWSLETTER</p>
                <p>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your email..." />
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Subscribe</button>
                        </span>
                    </div>
                </p>
            </div>
        </div>
    </div>
</footer>

<footer id="footer" class="clearfix">
    <div class="container">
        <div class="row">
			<div class="col-md-4">
                <p>
                    <a class="fa fa-twitter footer-socialicon fa-2x" target="_blank" href="https://twitter.com/"></a>&nbsp;&nbsp;
                    <a class="fa fa-facebook footer-socialicon fa-2x" target="_blank" href="https://www.facebook.com/"></a>&nbsp;&nbsp;
                    <a class="fa fa-google-plus footer-socialicon fa-2x" target="_blank" href="https://plus.google.com/"></a>&nbsp;&nbsp;
                    <a class="fa fa-linkedin footer-socialicon fa-2x" target="_blank" href="https://plus.google.com/"></a>&nbsp;&nbsp;
                </p>
            </div>
            <div class="col-md-8">
                <p>Created by <a href="https://www.shieldui.com" title="Shield UI">Shield UI</a> and hosted by <a href="https://www.prepbootstrap.com" title="PrepBootstrap">PrepBootstrap</a></p>
            </div>
        </div>
    </div>
</footer>

<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<link href="css/magnific-popup.css" rel="stylesheet">
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/theme.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">
    jQuery(function($) {
        // Mix It Up Gallery and Magnific Popup setup
        $('.container-gallery').mixItUp();
        $('.container-gallery').magnificPopup({
            delegate: 'a',
            type: 'image'
        });

        // Google Maps setup
        var googlemap = new google.maps.Map(
            document.getElementById('googlemap'),
            {
                center: new google.maps.LatLng(44.5403, -78.5463),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        );
    });
</script>

</body>
</html>
